<template>
	<view class="shopCate">
		<view class="shopCate_top">
			<view class="shopCate_top_title">
				常用分类
			</view>
			<view class="shopCate_top_more" @click="gocategoods(data.id,0,data.title)">
				<!-- <text>查看更多</text>
				<icon class="icon icon-right"></icon> -->
			</view>
		</view>
		<view class="shopCate_item">
			<view class="shopCate_item_box" v-for="(item,index) in list" :key="index"
				@click="gocategoods(data.id,item.id,data.title)">
				<image :src="item.icon" mode=""></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="shopCate_top">
			<view class="shopCate_top_title">
				日用品
			</view>
			<view class="shopCate_top_more" @click="gocategoods(data.id,0,data.title)">
				<!-- <text>查看更多</text>
				<icon class="icon icon-right"></icon> -->
			</view>
		</view>
		<view class="shopCate_item">
			<view class="shopCate_item_box" v-for="(item,index) in list2" :key="index"
				@click="gocategoods(data.id,item.id,data.title)">
				<image :src="item.icon" mode=""></image>
				<text>{{item.title}}</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "ShopCateItem",
		data() {
			return {
				list: [{
					icon: '/static/img/sp1.png',
					title: '商品1'
				}, {
					icon: '/static/img/sp2.png',
					title: '商品2'
				}, {
					icon: '/static/img/sp3.png',
					title: '商品3'
				}, ],
				list2: [{
					icon: '/static/img/zwj.png',
					title: '置物架'
				}, {
					icon: '/static/img/snh.png',
					title: '收纳盒'
				}, {
					icon: '/static/img/xy.png',
					title: '洗发'
				}, ],
			}
		},
		props: {
			data: {
				type: Object,
				default: function() {
					return {
						list: []
					}
				}
			}
		},
		methods: {
			gocategoods(cateid, cateid2, catetitle) {
				getApp().globalData.cateid = cateid;
				getApp().globalData.cateid2 = cateid2;
				getApp().globalData.catetitle = catetitle;
				uni.switchTab({
					url: '/pages/searchResult/index?cateid=' + cateid + '&cateid2=' + cateid2
				})
			}
		}
	}
</script>

<style lang="scss">
	.shopCate {
		width: 100%;
		height: fit-content;

		&_top {
			width: 100%;
			display: flex;
			height: 84upx;
			align-items: center;
			justify-content: space-between;

			&_title {
				font-size: 28upx;
				font-weight: 700;
			}

			&_more {
				display: flex;
				align-items: center;
				height: 100%;
				font-size: 26upx;
				color: #999;
			}
		}

		&_item {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			&_box {
				width: 150upx;
				margin-right: 20upx;
				margin-bottom: 20upx;
				display: flex;
				flex-direction: column;
				align-items: center;

				>image {
					width: 100%;
					height: 150upx;
					border-radius: 6upx;
					background-color: #f5f5f5;
				}

				>text {
					font-size: 24upx;
					line-height: 24upx;
					margin-top: 10upx;
				}
			}

			&_box:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
</style>
